<template>
  <view class="wrapper">
    <!--    <uv-sticky customNavHeight="0" bgColor="#fff">-->
    <!--      <view class="titleName" :style="{-->
    <!--        'background-image':'linear-gradient(to right,' +themConfig.theme.subColor+', '+themConfig.theme.color+')'-->
    <!--      }">-->
    <!--        客服页面-->
    <!--      </view>-->
    <!--    </uv-sticky>-->
    <PageBody :properties="pageBody" :scrollTop="scrollTop">
      <template v-slot:body>
        <view class="chat_wrapper">

          <view class="reconnect" v-if="socketOpen">
            <view style="color: #909399;font-size:15px">连接成功</view>
            <view style="height: 100px"></view>
          </view>


          <view class="chatmsg_item" v-for="it in chatMsgList">
            <view v-if="it.memberId != userInfo.id">
              <view class="chat_member">
                <view>
                  <uv-avatar :src="it.memberAvatar"></uv-avatar>
                </view>
                <view class="member_left">
                  <view>
                    <uv-text color="#909399" :text="it.memberName"/>
                  </view>
                  <view>
                    <uv-text color="#909399" size="12" :text="it.createTime"/>
                  </view>
                </view>
              </view>
              <view class="chat_msg_order_body_wrapper" v-if="it.msgType===4">
                <view class="chat_msg_order_body">
                  <OrderList :isLast="true" type="2" :datas="[]" :orderNo="it.content.orderNo"/>
                </view>
              </view>
              <view class="chat_msg_body" v-else-if="it.msgType===1">
                <text :style="{backgroundColor:'#b4b3b1'}" class="chat_msg_body_text">{{ it.content }}</text>
              </view>
              <view class="chat_msg_body_img" v-else-if="it.msgType===2">
                <uv-image mode="widthFix" :src="it.content" width="100%"></uv-image>
              </view>
            </view>
            <view v-else class="chat_member_right_wrapper">
              <view class="chat_member_right">
                <view class="member_right">
                  <view style="text-align: right">
                    <text style="color: #909399;font-size: 15px;margin-right: 10px">{{userInfo.nickName}}</text>
                  </view>
                  <view style="text-align: right;margin-right: 10px">
                    <uv-text color="#909399" size="12" :text="it.createTime"/>
                  </view>
                </view>
                <view>
                  <uv-avatar :src="userInfo.avatar"></uv-avatar>
                </view>
              </view>
              <view class="chat_msg_order_body_wrapper_right" v-if="it.msgType===4">
                <view class="chat_msg_order_body_right">
                  <OrderList :isLast="true" type="2" :datas="[]" :orderNo="it.content.orderNo"/>
                </view>
              </view>
              <view class="chat_msg_body_right" v-else-if="it.msgType===1">
                <text :style="{backgroundColor:'#b4b3b1'}" class="chat_msg_body_text_right">{{ it.content }}</text>
              </view>
              <view class="chat_msg_body_img_right" v-else-if="it.msgType===2">
                <view class="chat_body_img_right">
                  <uv-image mode="widthFix" :src="it.content" width="100%"></uv-image>
                </view>
              </view>

            </view>
          </view>


          <view class="reconnect" v-if="!socketOpen">
            <view><uv-icon size="17" name="error-circle"></uv-icon></view>
            <view @click="initWebSocket" style="color: #909399;font-size:15px">连接断开，点击重连</view>
            <view style="height: 100px"></view>
          </view>
        </view>
      </template>
    </PageBody>
    <view class="input_wrapper">
      <view class="input_wrapper_view">
        <view style="width: 100%">
          <uv-input v-model="chatInputMsg" placeholder="输入内容">
            <!-- vue3模式下必须使用v-slot:suffix -->
            <template v-slot:suffix>
              <view style="display: flex;align-items: center">
                <uv-icon size="40" name="photo"></uv-icon>
                <view style="margin: 0 10rpx"></view>
                <uv-button text="发送" size="small" @click="sendMsg"
                           :color="'linear-gradient(to right,' +themConfig.theme.subColor+', '+themConfig.theme.color+')'"></uv-button>
              </view>
            </template>
          </uv-input>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {mixins} from './index.js'

export default {
  mixins: [mixins]
}
</script>

<style>
.reconnect{
  display: flex;
  justify-content: center;
  align-items: center;
}
page {
  background: white !important;
}

//
//.titleName {
//  text-align: center;
//  background-color: #909399;
//  line-height: 70rpx;
//  color: white;
//  font-size: 18px;
//}

.chat_wrapper {
  background: white;
  padding: 0 10rpx;
}

.chatmsg_item {
  margin: 60rpx 0;
}

.chat_member {
  display: flex;
  align-items: center;
}

.member_left {
  margin-left: 20rpx;
}

.chat_msg_order_body_wrapper {
  margin-left: 60rpx;
  width: 90%;
  padding: 20rpx;
}


.chat_msg_order_body {
  border-radius: 15rpx;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.chat_msg_body {
  word-wrap: break-word; /* 允许在单词内换行 */
  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
  white-space: normal; /* 允许换行 */
  width: 80%;
  padding: 20rpx;
  color: white;
  margin-top: 10rpx;
}

.chat_msg_body_text {
  padding: 10rpx 20rpx;
  margin-left: 60rpx;
  border-radius: 20rpx;

}

.chat_msg_body_img {
  width: 60%;
  padding: 20rpx;
  margin-left: 60rpx;
}

.input_wrapper {
  height: 70px;
  padding: 0 15px;
}

.input_wrapper_view {
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

// 右边的
.chat_member_right_wrapper{

}
.chat_member_right{
  display: flex;
  justify-content: right;
}
.member_right{
  text-align: right;
}

.chat_msg_order_body_wrapper_right{
  margin-right: 60rpx;
  width: 90%;
  padding: 20rpx;
}
.chat_msg_order_body_right {
  border-radius: 15rpx;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}


.chat_msg_body_right {
  display: flex;
  justify-content: right;
  word-wrap: break-word; /* 允许在单词内换行 */
  overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
  white-space: normal; /* 允许换行 */
  width: 100%;
  padding: 20rpx;
  color: white;
  margin-top: 10rpx;
}

.chat_msg_body_text_right {
  padding: 10rpx 20rpx;
  margin-right: 60rpx;
  border-radius: 20rpx;

}

.chat_msg_body_img_right {
  display: flex;
  justify-content: right;
}
.chat_body_img_right{
  width: 60%;
  padding: 20rpx;
  margin-right: 60rpx;
}
</style>
